<template>
    <xcmg-table :data="tableData" style="width: 100%" :table-layout="fixed" v-bind="$attrs" max-height="400" border>
        <!-- 动态生成列 -->
        <el-table-column v-for="col in columns" :key="col.key" :prop="col.key" :label="col.label" :min-width="col.width">
            <template #default="{ row }">
                <!-- 1. 处理“进度”字段：显示进度条 -->
                <el-progress v-if="col.key.includes('进度') && row[col.key] !== undefined"
                    :percentage="parseFloat(row[col.key])" :stroke-width="20" :text-inside="true"
                    :format="progressFormat" />

                <!-- 2. 处理“优选”字段：1 显示 ✅，0 显示 ❌ -->
                <span v-else-if="col.key.includes('优选')">
                    {{ row[col.key] === 1 ? '🟢' : row[col.key] === 0 ? '' : '-' }}
                </span>

                <!-- 3. 其他字段：直接显示文本 -->
                <span v-else>{{ row[col.key] }}</span>
            </template>
        </el-table-column>
    </xcmg-table>
</template>
  
<script setup>
import { computed } from 'vue';

// 定义 props
const props = defineProps({
    // 原始数据，结构为对象数组，键值对形式
    data: {
        type: Array,
        required: true
    },
});

const getColumnWidth = (key, data) => {
  // 计算表头文本宽度
  const labelChars = key;
  const labelWidth = [...labelChars].reduce((width, char) => {
    return width + (char.charCodeAt(0) > 255 ? 16 : 8); // 中文算 16px，ASCII 算 8px
  }, 0);

  // 计算所有行中该列内容的最大宽度
  const contentWidth = data.reduce((maxWidth, row) => {
    const cellValue = String(row[key] || '');
    const cellWidth = [...cellValue].reduce((w, char) => {
      return w + (char.charCodeAt(0) > 255 ? 16 : 8);
    }, 0);
    return Math.max(maxWidth, cellWidth);
  }, 0);

  // 取表头和内容最大宽度，并加上内边距（如 padding: 10px * 2）
  let width = Math.max(labelWidth, contentWidth) + 20;

  // 特殊字段类型设置固定宽度
  if (key.includes('时间') || /date/i.test(key)) {
    width = 150;
  } else if (key.includes('描述') || /desc/i.test(key)) {
    width = Math.min(width, 300); // 描述类不限过宽
  } else {
    width = Math.min(width, 200); // 普通列最大 200px
  }

  // 最小宽度限制
  width = Math.max(width, 80);

  return width;
};

const { data, } = props;

// 提取所有唯一字段名作为列名
const allKeys = computed(() => {
    const keys = new Set();
    data.forEach(item => {
        Object.keys(item).forEach(key => keys.add(key));
    });
    return Array.from(keys);
});

// 生成列配置
const columns = computed(() => {
    return allKeys.value.map(key => ({
        key: key,
        label: key,
        width: getColumnWidth(key, data)
    }));
});

// 表格数据
const tableData = computed(() => data);

// 进度条显示格式（去掉百分号或自定义）
const progressFormat = (percentage) => `${percentage}%`;
</script>
  
<style scoped>
/* 可添加自定义样式 */
.el-progress {
    margin: 4px 0;
}
</style>